<template>
	<div class="animate-positiona">
		<div class="page has-navbar has-tabbar" v-nav="{title: title, showBackButton: true}">
			<div class="page-content padding-top" style="margin-bottom: 0">
				<div class="animate-position" style="height:100%;padding-top: 44px;">
					<div class="screen-title" style="height: 100%; overflow-y: auto;">
						<div class="screen-title-list" style="padding-top: 44px;">
							<table>
								<tr>
									<td @click="dateChangeFn" v-if="!(intentionState===0)">
										<div class="screen-title-item">{{dateText?dateText:'创建时间'}}</div>
									</td>
									<td v-else>
										<div class="screen-title-item">创建时间</div>
									</td>
									<td @click="cusLevel">
										<div class="screen-title-item">{{`${levelName?levelName:'客户级别'}`}}</div>
									</td>

									<td @click="cusIntentionState" v-if="customerShopMode=='01'||customerShopMode=='02'">
										<div class="screen-title-item">{{`${intentionStateName?intentionStateName:'状态'}`}}</div>
									</td>
									<td @click="channelIdFn">
										<div class="screen-title-item">{{`${channelName?channelName:'客户来源'}`}}</div>
									</td>
									<td @click="conditionFn" v-if="!(intentionState===0)">
										<div class="screen-title-item">{{screenName?screenName:'筛选'}}</div>
									</td>
								</tr>
							</table>
							<h5 style="background: #eaeaea;"><div class="sort">排序方式：<i class="ion-ios-arrow-thin-up" :class="{on:orderMode=='ASC'}" @click="asc">升序</i><i class="ion-ios-arrow-thin-down" :class="{on:orderMode=='DESC'}" @click="desc">降序</i></div></h5>
						</div>
						<div class="screen-section-padding">
							<scroll>
								<div class="screen-section">
									<ul>
										<li v-for="item in res" @click="goInfo(item)">
											<div class="screen-section-state" :data-state="item.customerInfo.followState">{{item.customerInfo.followState | filterFollowState}}</div>
											<div class="screen-section-txt" style="min-height: 86px">
												<table>
													<tr>
														<th>{{item.customerInfo.customer.customerName}}</th>
														<th>{{item.customerInfo.customer.customerPhone}} {{item.customerInfo.customer.cityName}}</th>
													</tr>
													<tr>
														<td>客户等级：</td>
														<td>{{item.customerInfo.levelTxt}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==0">
														<td>创建日期</td>
														<td>{{item.customerInfo.customer.createTime }}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==1">
														<td>跟进日期</td>
														<td>{{item.customerInfo.nextFollowDatetime | filterDateFormat}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==10">
														<td>跟进日期</td>
														<td>{{item.lastFollowInfo.nextFollowTime | filterDateFormat}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==20">
														<td>预约日期</td>
														<td>{{item.lastFollowInfo.appointmentTime | filterDateFormat}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==30">
														<td>战败日期</td>
														<td>{{item.lastFollowInfo.loseEfficacyTime | filterDateFormat}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==40">
														<td>失效日期</td>
														<td>{{item.lastFollowInfo.loseEfficacyTime | filterDateFormat}}</td>
													</tr>
													<tr v-if="item.customerInfo.followState==50">
														<td>成交日期</td>
														<td>{{item.lastFollowInfo.fixtureTime | filterDateFormat}}</td>
													</tr>
													<!--<tr>
														<td colspan="2"><p style="max-height: 44px;overflow: hidden; text-overflow: ellipsis; ">{{`${item.customerInfo.customerRemark?item.customerInfo.customerRemark:''}`}}</p></td>
													</tr>-->
												</table>
												<div v-if="item.customerInfo.followState==0" class="screen-router-next" @click.stop="dist(item)">分配</div>
											</div>
										</li>

									</ul>
								</div>
							</scroll>
						</div>
						<form @submit.prevent="submit" method="post" style="display: none;">
							<input type="text" name="shopId" v-model="userSession.shopId" />
							<input type="text" name="pageIndex" v-model="pageIndex" />
							<input type="text" name="levelId" v-model="levelId" />
							<input type="text" name="followState" v-model="intentionState" />
							<input type="text" name="pageSize" v-model="pageSize" />
							<input type="text" name="marketId" v-model="userSession.marketId" />
							<input type="text" name="isReach" v-model="isReach" />
							<input type="text" name="followerId" v-model="screenId" />
							<input type="text" name="orderMode" v-model="orderMode">
							<input type="text" name="orderColumn" v-model="dateId">
							<input type="text" name="channelId" v-model="channelId">
							<input type="text" name="customerShopMode" v-model="customerShopMode">
							<input type="submit" ref="buttonSubmit" />
						</form>
					</div>
				</div>
			</div>

			<transition enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
				<keep-alive>
					<condition v-if="conditionShow" @cancel="cancel" :coditionAll="coditionAll" />
				</keep-alive>
			</transition>
			<transition enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
				<keep-alive>
					<dist v-if="distState" :customerShopId="cusShopId" @cancelt="cancelt" />
				</keep-alive>
			</transition>
			<transition-group enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
				<modalIndex :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :itemIndex="index" :key="item.emit" />
			</transition-group>
		</div>
	</div>
</template>
<script>
	import modalIndex from 'src/assembly/modalIndex.vue'
	import Scroll from 'src/components/statistics/scroll.vue'
	import modal from 'src/assembly/modalList.vue'
	import condition from 'src/components/customer/screen_condition.vue'
	import dist from 'src/components/customer/screen_dist.vue'
	import { bus } from 'bus.js'
	
	export default {
		name: 'screen',
		data() {
			return {
				title:'客户列表',
				coditionAll:true,
				customerShopMode:'',
				customerShopModeName:'',
				pageIndex: 1,
				pageSize: 10,
				res: [],
				orderMode: 'DESC',
				cusLevelRes: [],
				conditionShow: false,
				
				cusIntentionStateRes: [{
						id: 10,
						name: '跟进中'
					},
					{
						id: 20,
						name: '已预约'
					}
				],
				cusIntentionStateResTow: [
					{
						id: 30,
						name: '已战败'
					},
					{
						id: 40,
						name: '已失效'
					},
					{
						id: 50,
						name: '已成交'
					}
				],
				dateState: [{
						id: 'NEXT_FOLLOW_DATETIME',
						name: '下次跟进时间'
					},
					{
						id: '',
						name: '创建时间'
					}
				],
				dateText: '',
				dateId: '',
				intentionState: '',
				intentionStateName: '',
				paramsIs: [],
				levelId: '',
				levelName: '',
				screenName: '',
				screenId: '',
				isReach: '',
				getNext: false,
				channelId: '',
				channelName: '',
				channelList: [],
				distState: false,
				cusShopId: '',
			}
		},
		components: {
			Scroll,
			modal,
			condition,
			modalIndex,
			dist
		},
		methods: {
			//跳转带有缓存
			goInfo(val) {
				this.$store.commit('screenToInfoChange', val)
				console.log(val)
				this.$router.push({
					path: '/customer_info',					
					query:{key:true,customerShopId:val.customerInfo.customerShopId},
				})
			},
			//分配
			dist(val) {
				// if(!val.brandName){
				// 	$toast.show('请先添加意向', 2000)
				// 	return
				// }
				this.cusShopId = val.customerInfo.customerShopId
				this.distState = true
			},
			//筛选条件
			desc() {
				this.orderMode = 'DESC'
				this.showCtrl()
			},
			//筛选条件
			asc() {
				this.orderMode = 'ASC'
				this.showCtrl()
			},
			//关闭分配
			cancelt(state) {				
				this.distState = false
				if(state){
					this.showCtrl()
				}
			},
			//请求数据
			showCtrl() {
				console.log(123)
				this.$nextTick().then(() => {
					setTimeout(()=>{
						this.buttonSubmit.click()
					},100)
				})
			},
			busOn() {
				bus.$off('cusLevelModal')
				bus.$off('cusIntentionState')
				bus.$off('dateChangeFn')
				bus.$off('channelEmit')
				bus.$on('cusLevelModal', (index) => {
					if(String(index).indexOf('all') > -1) {
						this.levelId = ''
						this.levelName = ''
					} else {
						this.levelId = this.cusLevelRes[index].id
						this.levelName = this.cusLevelRes[index].name
					}
					this.paramsIs = []
					this.showCtrl()
				})
				bus.$on('cusIntentionState', (index) => {
					if(String(index).indexOf('all') > -1) {
						this.intentionState = ''
						this.intentionStateName = ''
					} else {
						this.intentionState = this.paramsIs[0].list[index].id
						this.intentionStateName = this.paramsIs[0].list[index].name
					}
					this.paramsIs = []
					this.showCtrl()
				})
				bus.$on('dateChangeFn', (index) => {
					if(String(index).indexOf('all') > -1) {
						this.dateId = ''
						this.dateText = ''
					} else {
						this.dateId = this.paramsIs[0].list[index].id
						this.dateText = this.paramsIs[0].list[index].name
					}
					this.paramsIs = []
					this.showCtrl()
				})
				bus.$on('channelEmit', (index) => {
					// console.log(123)
					if(String(index).indexOf('all') > -1) {
						this.channelId = ''
						this.channelName = ''
					} else {
						this.channelId = this.paramsIs[0].list[index].id
						this.channelName = this.paramsIs[0].list[index].name
					}
					this.paramsIs = []
					this.showCtrl()
				})

			},
			//排序
			dateChangeFn() {
				this.paramsIs.push({
					list: this.dateState,
					title: '跟进时间',
					emit: 'dateChangeFn',
					index: this.dateId,
					all: true,
				})
			},
			//客户级别
			cusLevelModal() {
				this.paramsIs.push({
					list: this.cusLevelRes,
					title: '客户级别',
					emit: 'cusLevelModal',
					index: this.levelId,
				})
			},
			//客户等级
			cusLevel() {
				if(this.cusLevelRes.length > 0) {
					this.cusLevelModal()
				} else {
					window.axios.get(baseUrl + '/crm-web/controller/sysParam/customerLevel-list',{params:{marketId:sess.get('userSession').marketId,shopId:sess.get('userSession').shopId,levelState:1}}).then((res) => {
						// console.log(res)
						this.cusLevelRes = []
						for(let i of res.data.result) {
							this.cusLevelRes.push({
								name: i.levelTxt,
								id: i.levelId
							})
						}
						//						console.log(this.paramsIs)
						this.cusLevelModal()
					})
				}
			},
			//客户状态
			cusIntentionStateMoadl() {
				if(this.customerShopMode=='01'){
					this.paramsIs.push({
						list: this.cusIntentionStateRes,
						title: '客户状态',
						emit: 'cusIntentionState',
						index: this.intentionState,
					})
				}else if(this.customerShopMode=='02'){
					this.paramsIs.push({
						list: this.cusIntentionStateResTow,
						title: '客户状态',
						emit: 'cusIntentionState',
						index: this.intentionState,
					})
				}
			},
			//客户来源
			channelIdFn() {
				if(this.channelList.length == 0) {
					window.axios.get(baseUrl + '/crm-web/controller/sysParam/channel-list', {params:{marketId:sess.get('userSession').marketId,channelState:1}}).then((res) => {
						for(let i of res.data.result) {
							this.channelList.push({
								id: i.channelId,
								name: i.channelName
							})
						}
					})
				}
				this.paramsIs.push({
					list: this.channelList,
					title: '客户来源',
					emit: 'channelEmit',
					index: this.channelId
				})
			},
			cusIntentionState() {
				this.cusIntentionStateMoadl()
			},
			////提交跳转
			submit(event) {

				if(!this.getNext) {
					this.res = []
				} else {
					this.getNext = false
				}
				let formDate = new FormData(event.target)
				let params = {}

				var obj = event.srcElement ? event.srcElement : event.target;
				//数据处理
				for(let i of obj) {
					if(i.name) {
						Object.assign(params, {
							[i.name]: i.value
						})
					}
				}
				this.getdata(params)
				// console.log(params)


			},
			getdata(params) {
				// console.log(params)
				window.axios.get(baseUrl + '/crm-web/controller/resForApp/customerInfoList', {
					params: params
				}).then((res) => {
					// console.log(res)

					if(res.data.result.length == 0) {
						this.$store.commit('infiniteInitChange', 2)
						return
					}
					for(let i of res.data.result) {
						this.res.push(i)
					}
					if(res.data.result.length == 10) {
						this.$store.commit('infiniteInitChange', 0)
						this.$store.commit('refreshInitChange', false)
					} else {
						this.$store.commit('refreshInitChange', false)
						this.$store.commit('infiniteInitChange', 2)
					}
				})
			},
			// 筛选
			conditionFn() {
				this.conditionShow = true
			},
			// 筛选取消
			cancel(res) {
				this.conditionShow = false
				if(res.submit) {
					this.screenName = res.checkedName,
					this.screenId = res.checkedId
					if(!this.screenId&&this.$route.query.userId){
						this.screenId = this.userSession.userId
					}
					this.isReach = res.isReach
					this.showCtrl()
				}
			},
			titleChange(){
//				this.titleList.map(item=>{
//					if(item.id == this.$route.query.followState&&!this.$route.query.userId){
//						this.title = item.name
//					}
//				})
				if(this.$route.query.userId){
					if(this.$route.query.followState){
						switch(~~this.$route.query.followState){
							case 1:
								this.title = '新分配待处理'
								break							
						}
					}else{
						switch(~~this.$route.query.customerShopMode){
							case 1:
								this.title = '我的跟进客户'
								break
							case 2:
								this.title = '我的结束客户'
								break
							case 3:
								this.title = '过期未处理'
								break	
							case 4:
								this.title = '今日待处理'
								break							
						}
					}
				}else{
					if(this.$route.query.followState||this.$route.query.followState===0||this.$route.query.followState==='0'){
						switch(~~this.$route.query.followState){
							case 0:
								this.title = '新客户待分配'
								break
							case 1:
								this.title = '员工未处理'
								break
						}
					}else{
						switch(~~this.$route.query.customerShopMode){
							case 1:
								this.title = '所有跟进客户'
								break
							case 2:
								this.title = '所有结束客户'
								break
						}
					}
				}
			}
		},
		computed: {
			userSession() {
				return sess.get('userSession')
			},
			buttonSubmit() {
				return this.$refs.buttonSubmit
			}
		},
		mounted() {
			if(this.$route.query.followState!=undefined) {
				this.intentionState = parseInt(this.$route.query.followState)
			}
			if(this.$route.query.userId == 1){
				this.coditionAll = false
				this.screenId = this.userSession.userId
			}
			if(this.$route.query.customerShopMode){
				this.customerShopMode = this.$route.query.customerShopMode
			}
			this.showCtrl()
		},
		created() {
			this.busOn()
			this.titleChange()
		},
		watch: {
			'$store.state.scroll.refreshInit': function() {
				if(this.$store.state.scroll.refreshInit) {
					//重新发送请求
					this.pageIndex = 1
					this.showCtrl()
				}
			},
			'$store.state.scroll.infiniteInit': function() {
				if(this.$store.state.scroll.infiniteInit == 1) {
					this.pageIndex++
						this.getNext = true
					this.showCtrl()
				}
			}
		}

	}
</script>
<style scoped="scoped">
	.sort {
		height: 20px;
		line-height: 20px;
	}
	
	.screen-title-list td {
		width: auto;
	}
	
	.sort i {
		font-size: 12px;
		height: 20px;
		border-radius: 3px;
		padding: 0 5px;
		line-height: 20px;
		display: inline-block;
		color: #999;
		text-align: center;
		margin-left: 5px;
		vertical-align: top;
	}
	
	.sort i:before {
		font-size: 15px;
		vertical-align: middle;
	}
	
	.sort i.on {
		background: #FF6816;
		color: #fff;
	}
</style>